.item {
   background: var(--bg-content);
   padding: 1.5rem;
   border-radius: 1rem;
   display: flex;
   align-items: center;
   gap: 1rem;
   position: relative;
   user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;

   @media (max-width: 1024px) {
      padding: 1rem;
   }

   .drag {
      cursor: grab;
      font-size: 2rem;
      display: flex;
   }

   &__info {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      margin-right: auto;
      width: 80%;
      overflow: hidden;
   }

   &__name {
      font-size: 1.6rem;
      font-weight: 600;
      color: var(--text-primary);

      @media (max-width: 1024px) {
         font-size: 1.3rem;
      }
   }

   &__date {
      font-size: 1.3rem;
      font-weight: 500;

      @media (max-width: 1024px) {
         font-size: 1.1rem;
      }
   }

   &__btn {
      padding: 0.8rem;
      padding: 1rem;
      border-radius: 8rem;
      border: none;
      background: var(--bg-secondary);
      display: flex;
      cursor: pointer;
      transition: all 0.2s ease-in-out;

      & svg {
         font-size: 2.2rem;
         font-size: 1.8rem;
         color: var(--text-secondary);
         opacity: 0.7;
         transition: all 0.2s ease-in-out;
      }

      &:hover svg {
         color: var(--text-primary);
         opacity: 1;
      }

      &.delete:hover svg {
         color: var(--red);
      }
   }
}
